<template>
  <div class="staff">
     <Navs :navtitle="titles"></Navs>
     <div class="back">
        <div class="container" >
                <div class="container-head" v-for='(item,index) in data' :key="index">
                   {{item.storeName}}
                </div>
                <router-link tag="div" to="staffs" style="height:100%" >
                     <div class="content" v-for='(item,index) in data' :key="index">
                        <p class="content-top">
                        <img src="../../assets/image/ic_delivery_avator.png" alt="">
                        <span>{{item.mainContacts}}</span>
                        <span class="managerLog">店长</span>
                        <span class="phone">{{item.mainContactsPhone}}</span>
                        </p>
                        <p class="content-bottom">
                            <img src="../../assets/image/ic_store.png" alt="">
                            <span>全部门店</span>
                        </p>
                     </div> 
                </router-link>
                <div class="bottom">
                    <router-link to="employees" tag="span">新增员工</router-link>
                </div>
        </div>
     </div>
    
  </div>
</template>

<script>
import Navs from '../../components/Navbar'
import BScroll from 'better-scroll'
export default {
   components:{
       Navs
   },
   data(){
       return{
          titles:'员工管理',
          data:[]
         }
   },
   methods:{
    //    staff(){
    //       this.$router.push('/staffs')
    //    },
      getListOfShopByGroupId(){
           let groupId=this.$store.state.userInfo.groupId
            let headers;
                    if (this.$store.state.token) {
                        headers = {
                        token: this.$store.state.token,
                        userId: this.$store.state.userInfo.id
                        };
                    } else {
                        headers = {};
                    }
            this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/getListOfShopByGroupId?groupId='+groupId,{},{headers})
            .then(res=>{
                console.log(res)
                this.data=res.data.result.items
                console.log(this.data)
            })
            .catch(err=>{
                console.log(err)
            })
      },
      getqueryEmployeeList(){
            let storeId=this.$store.state.order.storeId
            let shopId=this.$store.state.sales.id
            this.$http.post('https://web-gateway.newbeescm.com/ms-web/employeeManage/queryEmployeeList',{
                shopId:shopId,storeId:storeId
            })
            .then(res=>{
                console.log(res)
            })
            .catch(err=>{
                console.log(err)
            })
      }
    },
    mounted(){
      let container = document.querySelector('.container')
      let scroll =  new BScroll(container)
    },
    created(){
        this.getListOfShopByGroupId()
       this.getqueryEmployeeList()
    }
}

</script>

<style scoped lang="scss">
.title{
    position:fixed;
    top:0;
    left:0;
    z-index:99;
}
.back{
    position: absolute;
    top: 0.43rem;
    left: 0;
    bottom: 0;
    background: #F2F1F6;
    width: 100%;
    .container{
      width:100%;
     .container-head{
        display: flex;
        align-items: center;
        width:100%;
        height:0.45rem;
        padding-left:0.14rem;
        border-top:0.01rem  #f2f1f6 solid;
        font-size:0.14rem;
        box-sizing:border-box;
        background: #fff;
        position: sticky;
        top: 0.43rem;
        left: 0;
        z-index: 99;
     }
     .content{
        width:100%;
        height:0.94rem;
        background-color:#fff;
        padding:0.14rem;
        border-top:0.01rem #f2f1f6 solid;
        box-sizing:border-box;
        .content-top{
            width:100%;
            height:0.2rem;
            font-size:0.14rem;
            display:flex;
            align-items:center;
            box-sizing:border-box;
            :nth-child(2){
                margin-left:0.1rem;
                max-width:2rem;
                height:0.2rem;
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;

            }
            img{
                width:0.15rem;
                height:0.17rem;
            }
            .managerLog{
                display: flex;
                justify-content: center;
                align-items:center;
                font-size:0.1rem;
                margin-left:0.1rem;
                border:0.01rem solid #d33;
                color:#d33!important;
                width:0.3rem!important;

            }
            .phone{
                margin-left:0.1rem;
            }
        }
        .content-bottom{
            width:100%;
            height:0.35rem;
            font-size:0.13rem;
            margin-top:0.1rem;
            display:flex;
            color:#737373;
           img{
               width:0.16rem;
               height:0.15rem;
           }
           span{  
                    height:100%;
                    flex:1;
                    display:flex;
                    flex-direction:column;
                    justify-content:space-between;
                    display:-webkit-box;
                    text-overflow:ellipsis;
                    -webkit-box-orient:vertical;
                    -webkit-line-clamp:2;
                    overflow:hidden;
                    margin-left:0.1rem;
                    color: #737373;
               }
        }
     }
  }
}
.bottom{
    width:100%;
    height:0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position:fixed;
    bottom:0;
    left:0;
    z-index:99;
    background-color:#d33;
    font-size:0.15rem;
    color:white;
    box-sizing:border-box;

}
</style>